<template>
	
	<!-- 
	 swiper 默认的高度为150px
	 
	 image 默认的宽度为 320rpx => 基本样式中 重置为100%
	 
	 默认的高度为 240px
	 
	 计算图片的宽度和高度的比例
	 
	 把图片的比例也写到swiper标签样式
	 -->
	<scroll-view @scrolltolower="handleTolower" scroll-y class="album_contianer">
		<swiper autoplay circular indicator-dots>
			<swiper-item>
				<image src="https://img0.baidu.com/it/u=374954155,182831265&fm=253&fmt=auto&app=138&f=JPEG?w=960&h=500" mode=""></image>
			</swiper-item>
			<swiper-item>
				<image src="https://img0.baidu.com/it/u=2266815623,3460951831&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" mode=""></image>
			</swiper-item>
		</swiper>
		
		<view class="album_list">
			<view @click="tiaozhuan(item.id)" class="album_list_item" v-for="item in album" :key="item.id">
				<image class="album_list_item_pic" :src="item.pic" mode="aspectFill"></image>
				<view class="item_content">
					<view class="item_content_title">
						<view class="item_content_titles">{{item.title}}</view>
						<view class="item_content_titless">{{item.content}}</view>
					</view>
					<view class="item_content_focus">
						+ 关注
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script lang="ts" setup>
	import {onMounted , ref ,readonly , reactive,provide} from 'vue';
	import axios from '../../../utils/request.js';
	import {useTestStore} from '../../../store/index';
	const Test = useTestStore()
	let params = reactive({
		limit<Number>:30,
		order: "hot",
		skip<Number> : 0
	})
	console.log(Test.getItems)
	let album = Test.getItems
	
	onMounted(()=>{
		uni.setNavigationBarTitle({
			title:"专辑"
		})
		console.log(album)
		// getList();
		provide("test",album)
	})
	const getList = () => {
		axios({
			methods:'get',
			url:'v1/wallpaper/albumconsole.log(res)',
			params:params,
		}).then(res =>{
			console.log(res)
		}).catch(error =>{
			console.log(error)
		})
	}
	
	const handleTolower = () =>{
		console.log("到底了")
		// album.push(...albums);  // 处理数组类型的时候,需要这么处理
		album = Test.addItems
		// provide("test",album)
	}
	 
	const tiaozhuan = (id) =>{
		console.log(id)
		uni.navigateTo({
			url:"/pages/album/index?id="+id
		})
	}
	 
</script>

<style scoped>
	.album_contianer{
		height:calc(100vh - 40px);
	}
	.album_contianer>swiper{
		/* // 宽度永远都是750rpx */
		height: calc(750rpx / 1.8);
	}
	swiper-item>image{
		height: 100%;
	}
	.album_list_item{
		height:230rpx;
		width: 90%;
		margin-left: 5%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-bottom: 1px #EDEFEC solid;
	}
	.album_list_item_pic{
		height:180rpx;
		width:180rpx;
	}
	.item_content{
		height:180rpx;
		width: 65%;
		display: flex;
		flex-direction: column;
	}
	.item_content_title{
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		/* align-items: center; */
	}
	.item_content_titles{
		font-size: 30rpx;
		font-weight: 600;
	}
	.item_content_titless{
		margin: 10rpx;
		height:70rpx;
		display: -webkit-box;  /*设置为弹性盒子*/
		-webkit-line-clamp: 2;  /*最多显示5行*/
		overflow: hidden;  /*超出隐藏*/
		text-overflow: ellipsis;  /*超出显示为省略号*/
		-webkit-box-orient: vertical;
		word-break: break-all;  /*强制英文单词自动换行*/
	}
	
	.item_content_focus{
		height:50rpx;
		width: 100rpx;
		border: #8E5268 1px solid;
		color: #8E5268;
		font-size: 24rpx;
		padding: 10rpx;
		margin-left: 70%;
	}
</style>
